<template>
  <div class="page-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <!--        <el-button :icon="Delete" type="danger" @click="handleDelete($event)">-->
        <!--          批量删除-->
        <!--        </el-button>-->
      </vab-query-form-left-panel>
      <vab-query-form-left-panel :span="15">
        <el-form inline :model="queryForm" @submit.prevent>
          <!--          <el-form-item label="关键词">-->
          <!--            <el-input-->
          <!--              v-model.trim="queryForm.name"-->
          <!--              clearable-->
          <!--              placeholder="请输入关键词"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <el-form-item label="平台账号">
            <el-select v-model="queryForm.accountId" clearable>
              <el-option
                v-for="item in accountOperateList"
                :key="item.id"
                :label="item.platformAccount"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-table v-loading="listLoading" border :data="list">
      <el-table-column
        type="index"
        width="60"
        header-align="center"
        align="center"
        label="序号"
      />
      <el-table-column
        label="日期"
        prop="createTime"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="平台账号"
        prop="platformAccount"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="所属平台"
        prop="platformName"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="运营人员"
        prop="operateName"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="客服"
        prop="customerName"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="账面消费"
        prop="bookConsumption"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="展现"
        prop="unfold"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="点击"
        prop="click"
        show-overflow-tooltip
        header-align="center"
      />
      <el-table-column
        label="点击率"
        prop="clickRate"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="私信开口量"
        prop="privateOpenNum"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="私信咨询量"
        prop="privateConsultNum"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="私信人数"
        prop="privateNum"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="私信开口转化率"
        prop="privateOpenTransformRate"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="私信开口成本"
        prop="privateOpenCost"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="私信咨询成本"
        prop="privateConsultCost"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="实现消费"
        prop="realizeConsumption"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="登记客资"
        prop="signGuestCapital"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="评论区客资"
        prop="reviewGuestCapital"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="登记总数"
        prop="registration"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="有效客资"
        prop="canGuestCapital"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="加v量"
        prop="addWechatNum"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="加v率"
        prop="addWechatRate"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="新客成交单数"
        prop="newSuccessfulNum"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="新客成交额"
        prop="newSuccessfulPrice"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="老客成交单数"
        prop="oldSuccessfulNum"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="老客成交额"
        prop="oldSuccessfulPrice"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="总成交单数"
        prop="successfulSum"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="总成交额"
        prop="successfulSumPrice"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="成交率"
        prop="turnoverRate"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="ROI"
        prop="roi"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <el-table-column
        label="创建人"
        prop="createBy"
        show-overflow-tooltip
        header-align="center"
        align="center"
      />
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
  import { Delete, Plus, Search } from '@element-plus/icons-vue'
  import {
    // deleteInformationFlow,
    fetchInformationFlow,
    // fetchInformationFlowDetail,
  } from '@/api/informationFlow'
  import { fetchaccountOperate } from '@/api/accountManagement'
  export default defineComponent({
    name: 'MyAssetList',
    setup() {
      // const $baseConfirm = inject('$baseConfirm')
      // const $baseMessage = inject('$baseMessage')
      const state = reactive({
        editRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          name: '',
          status: '',
          pageNum: 1,
          pageSize: 10,
        },
        statusList: [
          {
            label: '闲置中',
            value: 0,
          },
          {
            label: '使用中',
            value: 1,
          },
          {
            label: '报废',
            value: 2,
          },
        ],
        accountOperateList: [],
      })
      const fetchAccountOperate = async () => {
        try {
          state.listLoading = true
          // state.queryForm.platformId = state.platformId
          // state.queryForm.accountId = state.accountId
          const { data } = await fetchaccountOperate()
          state.accountOperateList = data
          state.listLoading = false
        } catch (e) {
          console.log(e)
        }
      }
      const setSelectRows = (val) => {
        state.selectRows = val
      }
      // const handleDelete = (row) => {
      //   if (row.id) {
      //     try {
      //       $baseConfirm('你确定要删除当前项吗', null, async () => {
      //         const { msg } = await deleteInformationFlow({ ids: row.id })
      //         $baseMessage(msg, 'success', 'vab-hey-message-success')
      //         await fetchData()
      //       })
      //     } catch (e) {
      //       console.log(e)
      //     }
      //   } else {
      //     if (state.selectRows.length > 0) {
      //       try {
      //         const ids = state.selectRows.map((item) => item.id).join()
      //         $baseConfirm('你确定要删除选中项吗', null, async () => {
      //           const { msg } = await deleteInformationFlow({ ids })
      //           $baseMessage(msg, 'success', 'vab-hey-message-success')
      //           await fetchData()
      //         })
      //       } catch (e) {
      //         console.log(e)
      //       }
      //     } else {
      //       $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
      //     }
      //   }
      // }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNum = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNum = 1
        fetchData()
      }
      const fetchData = async () => {
        try {
          state.listLoading = true
          const { data } = await fetchInformationFlow(state.queryForm)
          state.list = data.list
          state.total = data.total
          state.listLoading = false
        } catch (e) {
          console.log(e)
        }
      }
      onMounted(() => {
        fetchData()
        fetchAccountOperate()
      })

      return {
        ...toRefs(state),
        setSelectRows,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>

<style scoped>
  .toolbar {
    margin-bottom: 4px;
  }
</style>
